<template>
  <div>
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.nickName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="isShow"
          label="用户密码"
          :label-width="formLabelWidth"
        >
          <el-input
            style="width: 400px"
            v-model="form.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9528/lejuAdmin/material/uploadFileOss"
            :show-file-list="false"
            :headers="headers"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="form.salt" :src="form.salt" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="选择角色" :label-width="formLabelWidth">
          <el-select
            v-model="form.roleIds"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请选择角色"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="isShow" type="primary" @click="makeSure"
          >确 定</el-button
        >
        <el-button v-else type="primary" @click="save">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/myAuth";
import accountApi from "@/api/authority/role/index";
export default {
  components: {},

  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "",
      isShow: true,
      options: [],
      form: {
        id: "",
        isDeleted: false,
        nickName: "",
        password: "",
        roleIds: [],
        salt: "",
        username: "",
      },
    };
  },

  created() {
    accountApi.findAllRoles().then((res) => {
      console.log(res);
      this.options = res.data.items;
    });
  },

  mounted() {},

  methods: {
    //   保存更改
    save() {
      accountApi.updateUserRoles(this.form).then((res) => {
        if (res.success) {
          this.$message.success("更新成功");
          this.dialogFormVisible = !this.dialogFormVisible;
          this.$emit("tofather");
        } else {
          this.$message.error("更新失败");
        }
      });
    },
    //   新增用户
    makeSure() {
      accountApi.saveUserRoles(this.form).then((res) => {
        if (res.success) {
          this.$message.success("新增成功");
          this.dialogFormVisible = !this.dialogFormVisible;
          this.$emit("tofather");
        } else {
          this.$message.error("新增失败");
        }
      });
    },
    //   上传头像
    handleAvatarSuccess(e) {
      console.log(e);
      this.form.salt = e.data.fileUrl;
    },
    change(item) {
      this.dialogFormVisible = !this.dialogFormVisible;
      console.log(item);

      if (item) {
        this.isShow = false;
        accountApi.user(item).then((res) => {
          console.log(res);
          this.form = res.data.user;
        });
      } else {
        this.isShow = true;
        this.form = {
          id: "",
          isDeleted: false,
          nickName: "",
          password: "",
          roleIds: [],
          salt: "",
          username: "",
        };
      }
    },
  },

  computed: {
    headers() {
      const token = getToken();
      return { token };
    },
  },

  watch: {},
};
</script>

<style scoped lang='scss'>
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}
</style>